<template>
  <com-card>
    <div slot="com_header">添加账号</div>
    <div slot="com_con">
      <el-row>
        <el-col :xs="24" :sm="6">
          <el-form size="small" :model="user" :rules="checkUser" ref="userForm">
            <el-form-item label="账号:" label-width="80px" prop="account">
              <el-input type="text" v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item label="密码:" label-width="80px" prop="password">
              <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>

            <el-form-item label="确认密码:" label-width="80px" prop="pwd">
              <el-input type="password" v-model="user.pwd"></el-input>
            </el-form-item>

            <el-form-item label="用户组:" label-width="80px">
              <el-select placeholder="请选择用户组" v-model="user.userGroup">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通用户" value="普通用户"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label-width="80px">
              <el-button type="primary" @click="save">添加</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/card";
// 导入api
import { api_save } from "../../api/users.js";
export default {
  components: {
    ComCard,
  },
  data() {
    function checkAccount(rule, value, callback) {
      // value表示输入框的内容
      // callback表示要回调的函数 注意 错误需要 return callback（new Error('错误提示信息')） 正确则直接callback()
      const reg = /^[a-zA-Z0-9]{3,12}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入长度3-12的字母数字"));
      }
    }
    function checkPassword(rule, value, callback) {
      // value表示输入框的内容
      // callback表示要回调的函数 注意 错误需要 return callback（new Error('错误提示信息')） 正确则直接callback()
      const reg = /^[a-zA-Z0-9]{3,6}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入长度3-6的字母数字为密码"));
      }
    }
    const checkpwd = (rule, value, callback) => {
      if (value == this.user.password) {
        callback();
      } else {
        return callback(new Error("两次密码不一致"));
      }
    };

    return {
      user: {
        account: "",
        password: "",
        userGroup: "",
        pwd: "",
      },
      checkUser: {
        account: [
          //   {required:true,message:'请输入用户名',trigger:'blur'}
          { validator: checkAccount, trigger: "blur" },
        ],
        password: [
          //   {required:true,message:'请输入密码',trigger:'blur'}
          { validator: checkPassword, trigger: "blur" },
        ],
        pwd: [{ validator: checkpwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    save() {
      console.log(this.user);
      this.$refs.userForm.validate(async (b) => {
        if (b) {
         let rst = await api_save(this.user);
         let{code,msg}=rst;
         if(code==0){
           this.$router.replace('/users/list')
         }else{
           this.$message.error(msg)
         }
         console.log(rst);
        } else {
          console.log(b + "不通过");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>